<div ng-controller="VisEditor" class="app-container vis-editor vis-type-{{ vis.type.name }}">

  <kbn-top-nav name="visualize" config="topNavMenu">
    <div class="vis-editor-info">
      <span ng-show="savedVis.id" class="vis-editor-info-title">
        <span ng-bind="::savedVis.title"></span>
      </span>
    </div>
  </kbn-top-nav>
  <navbar ng-if="chrome.getVisible()" name="visualize-search">
    <div class="fill bitty-modal-container">
      <div ng-if="vis.type.requiresSearch && $state.linked && !unlinking"
        ng-dblclick="unlink()"
        tooltip="Double click to unlink this visualization from the saved search"
        class="bitty-modal visualize-linked">
        <i aria-hidden="true" class="fa fa-link"></i>
        &nbsp;
        This visualization is linked to a saved search:
        <b>{{ savedVis.savedSearch.title }}</b>
      </div>

      <div
        ng-if="vis.type.requiresSearch && unlinking"
        ng-click="clearUnlinking()"
        class="bitty-modal">
        <i aria-hidden="true" class="fa fa-chain-broken"></i> Unlinked!
      </div>

      <form ng-if="vis.type.requiresSearch && $state.linked" class="inline-form fill" name="queryInput">
        <div class="typeahead">
          <div class="input-group">
            <input
              disabled
              type="text"
              class="form-control">

            <button
              class="btn btn-default" type="submit"
              ng-disabled="true" aria-label="Search">
              <span aria-hidden="true" class="fa fa-search"></span>
            </button>
          </div>
        </div>
      </form>

      <form
        ng-if="vis.type.requiresSearch && !$state.linked"
        ng-submit="fetch()"
        class="inline-form fill"
        name="queryInput">
        <div class="typeahead" kbn-typeahead="visualize">
          <div class="input-group"
            ng-class="queryInput.$invalid ? 'has-error' : ''">
            <input
              ng-model="state.query"
              parse-query
              input-focus
              kbn-typeahead-input
              placeholder="Search..."
              type="text"
              class="form-control">

            <button
              class="btn btn-default" type="submit"
              ng-disabled="queryInput.$invalid" aria-label="Search">
              <span aria-hidden="true" class="fa fa-search"></span>
            </button>
          </div>
          <kbn-typeahead-items></kbn-typeahead-items>
        </div>
      </form>
    </div>
    <div class="button-group"></div>
  </navbar>

  <filter-bar state="state"></filter-bar>

  <div class="vis-editor-content">

    <div class="collapsible-sidebar" ng-if="chrome.getVisible()">
        <vis-editor-sidebar class="vis-editor-sidebar"></vis-editor-sidebar>
    </div>

    <div class="vis-editor-canvas" ng-class="{ embedded: !chrome.getVisible() }">
      <visualize
        vis="vis"
        ui-state="uiState"
        show-spy-panel="chrome.getVisible()"
        editable-vis="editableVis"
        search-source="savedVis.searchSource">
      </visualize>
    </div>
  </div>

</div>
